<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css">
    <link href="../css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/common.js"></script>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/share.js"></script>
</head>
<style>
    #app {
        opacity: 0;
    }
</style>

<body>
    <div id='app'>
        <div v-if="chenload">
            <div class="xstutop">
                <div class="xstutopcon">
                    <div class="xstuleftop">
                        <img src='img/people.png' />
                        <div class="leftrigh">
                            <div class="nicktel">{{user_tel}}</div>
                        </div>
                    </div>
                    <div class="xsturightop">
                        <div class="editspoan" @click="chngetel">
                            切换账号
                            <img src="img/my-left.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div v-if='Number(course_list.length)>0'>
                <div class="coursecon" v-for='(item,index) in course_list' :key='index'>
                    <div class="item">
                        <div class="itemtop" @click='decclick(item)'>
                            <p class="course_name">{{item.course_name}}</p>
                            <div class="course_status chen_yesstatus" v-if='Number(item.status)==1'>已交清</div>
                            <div class="course_status chen_huangstatus" v-else-if='Number(item.status)==3'>换课中</div>
                            <div class="course_status chen_tuistatus" v-else-if='Number(item.status)==4'>已退费</div>
                            <div class="course_status chen_huangstatus" v-else-if='Number(item.status)==2'>退款中</div>
                            <div class="course_status chen_tuistatus" v-else-if='Number(item.status)==5'>已换课</div>
                            <div class="course_status chen_tuistatus" v-else-if='Number(item.status)==6'>缴费失败</div>
                            <div class="course_status chen_yesstatus" v-else>未交清</div>
                        </div>
                        <div class="smallitemall" @click='decclick(item)'>
                            <div class="smallitem">
                                课程顾问姓名：{{item.consultant_name}}
                            </div>
                            <div class="smallitem smallitemcon">
                                <p>课程价格：折扣价 {{item.discounts}}元</p>
                                <p>已缴费 {{item.account_paid}}元</p>
                            </div>
                            <!-- <div class="smallitem">
                                押金：
                            </div> -->
                        </div>
                        <div class="butallnew">
                            <div class="butnewfl">
                                <p class="itembut" v-if='Number(item.status)<=0' @click='wkjqclick(item)'>补尾款</p>
                                <p class="itembut ml-20" v-if='Number(item.yj_button)==2' @click='yjpay(item)'>交押金</p>
                            </div>
                            <div class="morecz" @click='decclick(item)'>
                                更多操作<img class="nojiaopic" src='img/my-left.png' />
                            </div>
                        </div>
                    </div>
                    <!-- <p class="morelook" v-else>暂无更多数据</p> -->
                </div>
                <p class="morelook" v-if='Number(pagedata.length)>=10' @click='clickmore'>点击查看更多</p>
            </div>
            <div v-else class="morelook">
                暂无更多数据
            </div>
        </div>
        <div class="loadmore" v-else>
            <img src="../img/load.gif" alt="">
        </div>

        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="../img/load.gif" alt="">
            </div>
        </div>

        <div class="shawer">
            <div class="shawercon">
                <p class="shawertitle">请选择班级</p>
                <div class="shaweritem">
                    <div class="itemclass" v-for='(item,index) in classlist' :key='index' @click='changeitem(item,index)'>
                        <img v-if='Number(item.h5_sta)==1' src="img/choose.png" alt="">
                        <span class="activehui" v-else-if='Number(item.h5_sta)==3'></span>
                        <img v-else src="img/chooseactive.png" alt="">
                        <div class="itempayright">
                            {{item.nperName}}({{item.date_start}}~{{item.date_end}})
                            <span class="tuiclolor" v-if='Number(item.deposit)==1'>-未交</span><span class="zcclolor" v-if='Number(item.deposit)==2'>-已交</span>
                            <span class="redclolor" v-if='Number(item.deposit)==3'>-已退还</span>
                            <span class="redclolor">-{{item.money}}元</span>
                        </div>
                    </div>
                    <div class="itemclass" v-for='(item,index) in classlist1' :key='"id"+index' @click='changeitem(item,index)'>
                        <img v-if='Number(item.h5_sta)==1' src="img/choose.png" alt="">
                        <span class="activehui" v-else-if='Number(item.h5_sta)==3'></span>
                        <img v-else src="img/chooseactive.png" alt="">
                        <div class="itempayright">
                            {{item.nperName}}({{item.date_start}}~{{item.date_end}})
                            <span class="tuiclolor" v-if='Number(item.deposit)==1&&Number(item.money)>0'>-未交</span><span class="zcclolor" v-if='Number(item.deposit)==2&&Number(item.money)>0'>-已交</span>
                            <span class="redclolor" v-if='Number(item.deposit)==3&&Number(item.money)>0'>-已退还</span>
                            <span class="redclolor">-{{item.money}}元</span>
                        </div>
                    </div>
                </div>
                <!-- <div v-else class="morelook">
                    暂无可选班级
                </div> -->
                <div class="itemclassbut" >
                    <p class="itemqu" @click='quclickclass'>取消</p>
                    <p class="itemqu itemquyes" @click='yesclickclass'>确定</p>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/layer.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                chenload: false,
                showload: false,
                user_tel: '',
                course_list: [],
                user_id: '',
                page: 0,
                pagedata: [],
                limit: 10,
                class_active_id: '',
                classlist: [],
                classlist1: [],
                min: 0,
                isJn:1
            },
            methods: {
                changeitem(item, itndex) {
                    var that = this;
                    var h5_sta = item.h5_sta;
                    if (Number(h5_sta) == 3) {
                        layer.open({
                            content: '押金已交或者已退费或不来，具体请咨询课程顾问',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else {
                        // Number(item.yj_button)==2&&Number(item.deposit)==1
                        if (Number(item.yj_button) == 2 && Number(item.deposit) == 1 && Number(item.money) > 0) {
                            if (Number(h5_sta) == 1) {
                                for (var i = 0; i < that.classlist.length; i++) {
                                    that.classlist[i].h5_sta = 1;
                                }
                                that.class_active_id = item.class_id;
                                that.class_stu_id = item.id;
                                that.classlist[itndex].h5_sta = 2;
                            } else {
                                that.class_active_id = '';
                                that.class_stu_id = '';
                                that.classlist[itndex].h5_sta = 1;
                            }
                        } else {
                            layer.open({
                                content: '押金已交或者已退费或不来，具体请咨询课程顾问',
                                skin: 'msg',
                                time: 2 //1秒后自动关闭
                            });
                        }
                    }


                },
                yjpay(item) {
                    var that = this;
                    that.class_active_id = '';
                    that.class_stu_id = '';
                    that.showload = true;
                    that.isJn=item.is_jn
                    that.queryClassStu(item);
                    console.log(that.isJn);
                },
                queryClassStu(item) {
                    var that = this;
                    var myDate = new Date(); //获取当前时间
                    var year = myDate.getFullYear();
                    var month = Number(myDate.getMonth()) + 1;
                    var datatoday = myDate.getDate();
                    var today = year + '/' + month + '/' + datatoday;
                    var datestart = new Date(today.replace(/-/g, "/")); //将-转化为/，使用new Date
                    var data={}
                    var url=''
                    if(that.isJn==2){
                        data = {
                            course_id: item.course_id,
                            user_id: that.user_id,
                            order_id:item.id,
                        }
                        url='crmapi/Classroom/queryJnClassStu'
                    }else{
                        data = {
                            course_id: item.course_id,
                            user_id: that.user_id,
                        }
                        url='crmapi/Classroom/queryClassStu'
                    }
                    sharerequest.postMethod(url, data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var datalist = res.data;
                            var lists = [],
                                lists1 = [];
                            for (var i = 0; i < datalist.length; i++) {
                                datalist[i]['h5_sta'] = 1;
                                if (Number(datalist[i].yj_button) == 1) {
                                    datalist[i].h5_sta = 3;
                                }
                                if (Number(datalist[i].yj_button) != 1 && Number(datalist[i].money) > 0) {
                                    lists.push(datalist[i]);
                                } else {
                                    lists1.push(datalist[i]);
                                }
                            }
                            var setday = 0;
                            if (Number(lists.length) > 0) {
                                for (var i = 0; i < lists.length; i++) {
                                    var start_data = lists[i].date_start;
                                    var dateEnd = new Date(start_data.replace(/-/g, "/")); //将-转化为/，使用new Date
                                    var dateDiff = dateEnd.getTime() - datestart.getTime(); //时间差的毫秒数
                                    var days = parseInt(dateDiff / (1000 * 60 * 60 * 24)); //计算出相差天数
                                    // console.log(days);
                                    lists[i]['dayslen'] = days;
                                }
                                that.min = lists[0].dayslen;
                                var choosei = 0;
                                for (var i = 0; i < lists.length; i++) {
                                    if (Number(lists[i].dayslen) < Number(that.min)) {
                                        that.min = lists[i].dayslen;

                                        var choosei = i;
                                    }
                                }

                                lists[choosei].h5_sta = 2;
                                that.class_active_id = lists[choosei].class_id;
                                that.class_stu_id = lists[choosei].id;
                            }

                            that.classlist = lists;
                            that.classlist1 = lists1;
                        }
                        $('.shawer').fadeIn();
                        that.showload = false;
                    })
                },
                // 点击结清尾款
                wkjqclick(item) {
                    var that = this;
                    that.showload = true;
                    var data = {
                            remark: '',
                            user_course_id: item.id,
                            pay_method: '',
                            amount: Number(item.discounts) - Number(item.account_paid),
                            jietu: '',
                            oto_type: 2,
                            wkOrderId: '',
                            from: 2,
                            uid: that.user_id,
                        }
                        // cons_type  //1-顾问 2-学管
                    if (Number(item.cons_type) == 1) {
                        var url = 'crmapi/user/bukuan'
                    } else {
                        var url = 'crmapi/Learn/bukuan'
                    }
                    sharerequest.postMethod(url, data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            var ucp_id = data.ucp_id;
                            localStorage.setItem('payhref', window.location.href);
                            window.location.href = '../ordernew.html?ucp_id=' + ucp_id + '&appid=171pk17641pkzone1&ismy=1'
                        } else {
                            layer.open({
                                content: res.msg,
                                skin: 'msg',
                                time: 2 //1秒后自动关闭
                            });
                        }
                        that.showload = false;
                    })
                },
                decclick(item) {
                    var that = this;
                    window.location.href = 'dec.html?uc_id=' + item.id + '&course_id=' + item.course_id + '&user_id=' + that.user_id + '';
                },
                quclickclass() {
                    $('.shawer').fadeOut();
                },
                yesclickclass() {
                    var that = this;
                    if (that.class_active_id == '') {
                        layer.open({
                            content: '请先选择班级',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else {
                        $('.shawer').fadeOut();
                        that.showload = true;
                        var dataobj={}
                        var url=''
                        if(that.isJn==2){
                            dataobj = {
                                // class_id: that.class_active_id, //班级ID
                                user_id: that.user_id, //用户ID
                                class_stu_id: that.class_stu_id, //报道ID
                            }
                            url='crmapi/Classroom/classOrderJn'
                        }else{
                            dataobj = {
                                class_id: that.class_active_id, //班级ID
                                user_id: that.user_id, //用户ID
                                class_stu_id: that.class_stu_id, //报道ID
                            }
                            url='crmapi/Classroom/classOrder'
                        }
                        sharerequest.postMethod(url, dataobj, 1, (res) => {
                            if (Number(res.errcode) == 0) {
                                var data = res.res;
                                var ucp_id = data.id;
                                localStorage.setItem('payhref', window.location.href);
                                if(that.isJn==2){
                                    window.location.href = '../jnpay/ordernewjns.html?ucp_id=' + ucp_id + '&appid=171pk17641pkzone1&ismy=2'
                                }else{
                                    window.location.href = '../ordernew.html?ucp_id=' + ucp_id + '&appid=171pk17641pkzone1&ismy=2'
                                }
                            } else {
                                layer.open({
                                    content: res.msg,
                                    skin: 'msg',
                                    time: 2 //1秒后自动关闭
                                });
                            }
                            that.showload = false;
                        })
                    }
                },
                clickmore() {
                    var that = this;
                    that.showload = true;
                    that.page = Number(that.page) + 1;
                    that.courselist();
                },
                chngetel() {
                    var that = this;
                    window.location.href = 'login.html';
                },
                courselist() {
                    var that = this;
                    var data = {
                        user_id: that.user_id,
                        nowPage: that.page,
                        limit: that.limit
                    }
                    sharerequest.postMethod("crmapi/Student/StuCourse", data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            that.pagedata = data;
                            if (Number(that.page) <= 0) {
                                that.course_list = data;
                            } else {
                                that.course_list = that.course_list.concat(data);
                            }
                        }
                        that.chenload = true;
                        that.showload = false;
                    })
                },
                isAdmin() {
                    var that = this;
                    var obj = {
                        phone: that.user_tel,
                        token: '12345'
                    }
                    sharerequest.postMethod("crmapi/User/isAdmin", obj, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            var role = res.role;
                            // is_stu": 1,//是否是学员 0:不是 1:是
                            if (Number(role.is_stu) == 1) {
                                that.user_id = data.uid;
                                that.courselist();
                            } else {
                                that.course_list = [];
                                that.chenload = true;
                            }
                        }
                    })
                }
            },
            mounted() {
                var that = this;
                $('#app').css('opacity', 1);
                if (localStorage.getItem('erp_phone')) {
                    var user_tel = localStorage.getItem('erp_phone');
                    if ((/^1\d{10}$/.test(user_tel))) {
                        that.user_tel = localStorage.getItem('erp_phone');
                        that.isAdmin();
                    } else {
                        window.location.href = 'login.html';
                    }
                } else {
                    window.location.href = 'login.html';
                }
            }
        })
    </script>
</body>

</html>